<template>
  <div class="other_doc">
    <secret-upload-dialog
      @uploadComplete="init"
      saveInterFace="a/uploadotherfilehistory/uploadOtherFileHistory/save"
      fileType="fileTypeId"
      moduleName="其他文档"
      module="otherDoc"
      ref="secretUploadDialog">
    </secret-upload-dialog>
    <one-title title="其他文档" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'delete'"
          @click="handleDelete">
          <i class="iconfont icon-btn_delete"></i>
          删除
        </el-button>
        <el-button
          v-btn-permission="'edit'"
          @click="handleEdit">
          <i class="iconfont icon-btn_edit"></i>
          修改文档类型
        </el-button>
        <el-button
          v-btn-permission="'upload'"
          size="small"
          @click="showSecretUpload"
          type="primary">
          <i class="iconfont icon-btn_export"></i>
          上传
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="tableColConfig"
        ref="mesSearch"
        :searchResult="searchCount"
        @searchInfo="search">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          ref="tableNode"
          border
          stripe
          tooltip-effect="dark"
          v-loading="isLoading"
          :data="listData.list"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => !selectItems.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          @filter-change="handleFilterChange">
          <el-table-column
            width="40"
            type="selection"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="column.prop"
            v-for="column in columnList"
            :column="column">
          </mes-col-comp>
          <el-table-column
            label="操作"
            show-overflow-tooltip
            :resizable="false"
            fixed="right"
            align="center"
            width="120">
            <template slot-scope="scope">
            <span class="jump_item"
                  @click.stop="$downByBlob(scope.row.uploadHistoryId, scope.row.fileName)">下载</span>
              <span class="jump_item"
                    v-if="$checkPreviewName(scope.row.fileName)&&$checkPreviewSize(scope.row.fileSize)"
                    @click.stop="$previewFile(scope.row.uploadHistoryId)">预览</span>
              <span class="jump_item is_disabled" v-else>预览</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
    <el-dialog
      title="修改文档类型"
      :visible.sync="dialogVisible"
      width="400px"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog edit_file_type">
      <el-select v-model="fileType" size="small" placeholder="请选择类型">
        <el-option
          :key="item.id"
          v-for="item in FileType"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="saveFileType">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FileIcon from '@/components/FileIcon'
import tableColumn from './tableColumn'

// 查询列表接口
let listInit = 'a/uploadotherfilehistory/uploadOtherFileHistory/list'

export default {
  name: 'OtherDoc',
  components: {
    FileIcon
  },
  data() {
    return {
      tableColConfig: tableColumn, // 列配置
      isLoading: true, // 数据加载中
      searchParams: {}, // 查询参数
      sortOrder: {}, // 排序对象
      searchCount: NaN, // 搜索结果数
      fileType: '',
      selectItems: [], // 选中的数据,
      dialogVisible: false,
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    // 文档类型
    FileType() {
      return this.$store.state.dict.FileType.labels || []
    },
    // 列表数据
    listData() {
      return this.$store.state.otherDoc.listData
    },
    // 列循环
    columnList() {
      return this.tableColConfig.filter(item => item.noForCol !== true && item.isShow !== false)
    },
  },
  methods: {
    // 列筛选回调
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, filterParams.search)
      this.sortData = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    showSecretUpload() {
      this.$refs.secretUploadDialog.openDialog()
    },
    // 初始化方法
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      let postData = {
        method: 'post',
        url: listInit,
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchParams,
          sort: this.sortOrder
        },
        module: 'otherDoc',
        state: 'listData',
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (Object.keys(this.searchParams).length > 0) {
          this.searchCount = res.count
        } else {
          this.searchCount = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索方法
    search(params) {
      this.searchParams = params
      this.init()
    },
    // 排序方法
    handleSortChange(e) {
      this.sortOrder = this.$getSortOrder(e)
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchParams = {} // 查询参数
      this.sortOrder = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 选中方法
    handleSelectionChange(val) {
      this.selectItems = val
    },
    // 编辑方法
    handleEdit() {
      if (this.selectItems.length === 1 && this.selectItems[0].fileTypeId) {
        this.fileType = this.selectItems[0].fileTypeId
        this.dialogVisible = true
      } else if (this.selectItems.length) {
        this.fileType = ''
        this.dialogVisible = true
      } else {
        this.$message.error({
          message: '未选择任何数据',
          duration: 1500,
          center: true
        })
      }
    },
    // 修改文档类型
    saveFileType() {
      if (!this.fileType) {
        this.$message.error({
          message: '请选择文档类型',
          duration: 1500,
          center: true
        })
      } else {
        let postData = {
          method: 'post',
          url: 'a/uploadotherfilehistory/uploadOtherFileHistory/saveBatch',
          data: {
            uploadOtherFileHistoryList: this.selectItems.map(item => {
              return Object.assign({}, item, {fileTypeId: this.fileType})
            })
          },
          noCommit: true
        }
        this.$store.dispatch('saveData', postData).then(() => {
          this.dialogVisible = false
          this.init(this.listData)
          this.$message.success({
            message: '修改成功',
            duration: 1500,
            center: true
          })
        })
      }
    },
    // 删除提示信息
    handleDelete() {
      if (this.selectItems.length) {
        this.confirmDelete().then(() => {
          this.deleteItems()
        }).catch(() => {
        })
      } else {
        this.$message.error({
          message: '未选择任何数据',
          duration: 1500,
          center: true
        })
      }
    },
    // 删除
    deleteItems() {
      let postData = {
        method: 'post',
        url: 'a/uploadotherfilehistory/uploadOtherFileHistory/deleteBatch',
        data: {
          uploadOtherFileHistoryList: this.selectItems
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$message.success({
          message: '删除成功',
          duration: 1500,
          center: true
        })
        this.init(this.listData)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .other_doc {
    .upload_button {
      margin-left: 10px;
    }

    .edit_file_type {
      .el-select {
        width: 100%;
      }
    }

    .operation {
      color: #00b4ff;
      display: flex;
      justify-content: space-around;

      .iconfont {
        cursor: pointer;

        &.disicon {
          cursor: not-allowed;
          color: #a1b1c1;
        }
      }
    }
  }
</style>
